<template>
  <section>
    <img class="bg" src="/static/images/pic0.png" alt="">
    <h3>{{question.questionName}}</h3>
    <div class="option" v-for="(option, index) in question.optionList" :key="index"
    @click="active(option)" >
      <svg class="icon" aria-hidden="ture" :id="option.id"
      :class="[option.active ? 'active' : '']">
        <use xlink:href="#icon-gou"></use>
      </svg>
      <span>{{option.optionName}}</span>
    </div>
    <div class="submit" @click="next">提交</div>
  </section>
</template>

<script>
export default {
  name: 'question2',
  data () {
    return {
      title: '这是一道多选题',
      active1: '',
      options: [
        {
          option: '选项1',
          active: false
        },
        {
          option: '选项2',
          active: false
        },
        {
          option: '选项3',
          active: false
        },
        {
          option: '选项1',
          active: false
        },
        {
          option: '选项1',
          active: false
        }
      ]
    }
  },
  props: [
    'question'
  ],
  created () {
    this.initInfo()
  },
  methods: {
    active (flag) {
      flag.active = !flag.active
      alert(flag.active)
    },
    next () {
      this.$emit('next')
    },
    initInfo () {
      this.question.optionList.forEach(option => {
        option.active = false
      })
      console.log(JSON.stringify(this.question.optionList))
    }
  }
}
</script>

<style lang="scss" scoped>
section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
}
h3 {
  font-size: 40px;
  color: #999;
  margin: 30px auto;
  line-height: 60px;  
}
.bg {
  height: 100vw;
  width: 100vw;
}
.option {
  width: 500px;
  height: 90px;
  margin: 15px auto;
  display: flex;
  align-items: center;
  .icon {
    width: 70px;
    height: 70px;
    color: #ccc;
  }
  .active {
    color: #2e3192;
  }
  span {
    font-size: 40px;
    padding-left: 20px;
    color: #666;
  }
}
.submit {
  background-color: #1435ad;
  width: 280px;
  height: 120px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  color: #fff;
  margin-top: 40px;
}
</style>
